<template>
    <div class="forum">
            <!-- 导航链接 -->
            <NavigationBar />
      <h1>论坛信息</h1>
      <div class="forum-list">
        <div v-for="post in posts" :key="post.id" class="forum-post">
          <h2>{{ post.title }}</h2>
          <p>{{ post.content }}</p>
          <p class="author">作者: {{ post.author }}</p>
        </div>
      </div>
          <!-- 底部信息 -->
    <Footer />
    </div>
  </template>
  
  <script>
    import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';

  export default {
    name: 'Forum',
    components: {
    NavigationBar,Footer
  },
    data() {
      return {
        posts: [
          // 示例帖子数据
          { id: 1, title: '如何训练狗狗', content: '分享一些训练狗狗的小技巧...', author: '用户A' },
          { id: 2, title: '猫咪的日常护理', content: '猫咪需要定期梳理毛发...', author: '用户B' },
          // 更多帖子...
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .forum {
    text-align: center;
  }
  
  .forum-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .forum-post {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 80%;
  }
  
  .author {
    color: #666;
  }
  </style>